<template>
	<div class="addstore" id="addstore">
		<div class="st_t1">
			新增商家
		</div>
		<div class="admin_info">
			<ul>
				<li>
					<div class="admin_left">商家名称：</div>
					<div class="admin_right">
						<input type="text" placeholder="请输入..." v-model="storeInfo.brandName" />
					</div>
				</li>
				<li>
					<div class="admin_left">副标题：</div>
					<div class="admin_right">
						<input type="text" placeholder="请输入..." v-model="storeInfo.title" />
					</div>
				</li>
				<li class="imgList">
					<div class="admin_left">商家图片：</div>
					<div class="admin_right admin_upload">
						<input type="file" class="upload" id="upload"  v-on:change="imgSrc" style="display: none;"/>
						<img :src="storeInfo.brandImg"  v-on:click="changeClick()" />
					</div>
				</li>
				<li>
					<div class="admin_left">商家地址：</div>
					<div class="admin_right">
						<input type="text" placeholder="请输入..." id="text" v-model="storeInfo.address" />
					</div>
				</li>
			</ul>
		</div>
		<div class="map_main">
			<baidu-map class="map-container" id="container" >
  				<bm-view class="bm-view"></bm-view>
  				<bm-local-search :keyword="storeInfo.address" @markersset='result' :resultPanel='false' :auto-viewport="true" :location="location" :selectFirstResult='true'></bm-local-search>
			</baidu-map>
		</div>
		<div class="save">
			<button v-on:click="saveInfo()">确定添加</button>
		</div>
	</div>
</template>

<script>
	
	export default {
		name: 'addstore',
		computed: {
		},
		data() {
			return {
				title: '',
				trade_index: 1,
				location:'上海',
				storeInfo:{
					brandName:'',
					brandImg:'../../../static/imgs/upload.png',
					title:'',
					address:'上海',
					location:''
				}
			}
		}, //定义变量
		components: {
			
		}, //注册组件
		methods: {//方法都在这里
			changeClick:function(){
				this.trueClick()
			},
			trueClick:function(){
				$('#upload').click()
			},
			imgSrc:function(){
				var that=this
				var node=document.getElementById('upload')
				var imgURL = "";  
		        try{  
		            var file = null;  
		            if(node.files && node.files[0] ){  
		                file = node.files[0];  
		            }else if(node.files && node.files.item(0)) {  
		                file = node.files.item(0);  
		            }  
		            try{  
		                imgURL =  file.getAsDataURL();  
		            }catch(e){  
		               var imgRUL = window.URL.createObjectURL(file);  
		            }  
		        }catch(e){  
		            if (node.files && node.files[0]) {  
		                var reader = new FileReader();  
		                reader.onload = function (e) {  
		                    imgURL = e.target.result;  
		                };  
		                reader.readAsDataURL(node.files[0]);  
		            }  
		        }
//		        console.log(imgRUL)
		        var formData = new FormData();
				formData.append('file', $('#upload')[0].files[0]);
				$.ajax({
				    url: 'https://www.vaniswdq.com/springUpload',
				    type: 'POST',
				    cache: false,
				    data: formData,
				    processData: false,
				    contentType: false
				}).done(function(res) {
//					console.log(res)
					that.storeInfo.brandImg=res
				}).fail(function(res) {});
			},
			saveInfo:function(){
				var that=this
				if(that.storeInfo.brandName==""){
					alert('请添加商家名称')
					return;
				}
				if(that.storeInfo.title==""){
					alert('请添加副标题')
					return;
				}
				if(this.storeInfo.brandImg=='../../../static/imgs/upload.png'){
					alert('请选择商家图片')
					return;
				}
				this.lh_http('post', "tbBrand/create",this.storeInfo).done(function(res) {
					if(res.status) {
//						console.log(res)
						alert('添加成功')
						that.$router.push({
							path: '/user/store'
						})
					} else {
						alert(res.data);
					}
				})
				
				
			},
			result(result){
				var poi=result[0].point
				var that=this
				that.storeInfo.location=poi.lng+','+poi.lat
//				console.log(poi.lng+','+poi.lat)
			}
		},
		mounted() {
			var that = this;
			//获取banner
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	.addstore {
	text-align: left;
	padding-left:20px;
		.st_t1 {
			line-height: 40px;
			font-size:24px;
			font-weight: normal;
			background:#ECECEC;
			padding-left:20px;
		}
		.admin_info{
			width:100%;
			margin:20px auto 0;
			padding-left:20px;
			ul{
				li{
					width:100%;
					overflow: hidden;
					zoom:1;
					margin-bottom:20px;
					.admin_left{
						float:left;
						width:100px;
						line-height: 40px;
					}
					.admin_right{
						float:left;
						line-height: 40px;
						input{
							width:313px;
							height:40px;
							border:#ccc solid 1px;
							padding-left:10px;
						}
					}
					.admin_upload{
						position: relative;
						.upload{
							position: absolute;
							top:0;
							left:0;
							width:200px;
							height:200px;
						}
					}
				}
				.imgList{
					.admin_right{
						position: relative;
						img{
							margin-top:5px;
							width:200px;
							height:200px;
						}
						.saveCode{
							width:134px;
							height:40px;
							background:#007AFF;
							color:#fff;
							border-radius:4px;
							cursor: pointer;
							position: absolute;
							top:5px;
							right:-160px;
						}
					}
				}
			} 
		}
		.note{
			margin-top:20px;
			.note_title{
				position:relative;
				.note_time{
					position: absolute;
					top:0px;
					left:300px;
					input{
						width:110px;
						height:30px;
						border:#ccc solid 1px;
						padding-left:10px;
						margin-top:5px;
					}
				}
			}
		}
		.map_main{
			padding-left:20px;
			.bm-view {
   				width: 100%;
    			height: 500px;
  			}
		}
		.save{
			padding-left:20px;
			button{
				width:313px;
				height:40px;
				background:#007AFF;
				color:#fff;
				border-radius:4px;
				margin-top:40px;
			}
		}
	}
</style>